<template>
  <div class="userinfo_welcome">
    <h1>Hello, I'm {{ data.nickName }}!</h1>
    <div class="es-tag es-tag-magenta es-tag-checked">
      <span class="es-tag-text">Joined in {{ data.joinTime }}</span>
    </div>
    <p>
      {{ data.desc }}
    </p>
  </div>
</template>
<script>
export default {
  name: "UserInfoWelcome",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>
<style lang="scss">
.userinfo_welcome {
  clear: both;
  margin-top: 1.25rem;
  padding: 0 0 1rem 0;
  &.small {
    display: flex;
    h2 {
      font-size: 1.5rem;
    }
    p {
      margin-left: 1rem;
      font-size: 0.5rem;
    }
  }
  h1 {
  }
  p {
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.5);
    padding: 0.625rem 0;
  }
}
</style>
